<template>
  <a-spin :loading="loading" style="width: 100%; height: 100%">
    <a-card
      class="general-card"
      :title="title"
      :header-style="{ paddingBottom: '12px' }"
      style="position: center"
    >
      <div class="content">
        <template> 总回答人数： </template>
        <a-statistic
          :value="count"
          :show-group-separator="true"
          :value-from="0"
          animation
        />
      </div>
      <div class="chart" style="height: 220px">
        <div
          ref="CloudArea"
          style="width: 100%; height: 100%; margin: 0; padding: 0"
        />
      </div>
    </a-card>
  </a-spin>
</template>

<script>
  import * as echarts from 'echarts';
  import 'echarts-wordcloud';

  import questionDataSurveyStore from '@/store/modules/data-screen';
  import { toRaw } from 'vue';

  const questionData = questionDataSurveyStore();

  const mask = new Image();
  // mask.src = ""
  mask.src =
    '';
  // '';

  export default {
    name: 'CloudArea',
    props: {
      currentTab: String,
      title: String,
      count: Number,
      index: Number,
    },
    data() {
      return {
        chart: '',
        newIndex: 0,
      };
    },
    watch: {
      index() {
        this.initEcharts(this.index);
      },
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart(this.index);
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();
      });
    },
    // watch:{
    //   index (newData) {
    //     this.newIndex=newData
    //     this.getIndex(this.newIndex)
    //   }
    // },
    methods: {
      initChart(index) {
        // eslint-disable-next-line no-shadow
        this.chart = echarts.init(this.$refs.CloudArea); // 获取到容器的节点，初始化echarts实例
        const option = {
          // 指定配置项和数据

          tooltip: {
            // show: false,
            // // formatter: '{b}<br/>{c} '
          },
          textStyle: {
            color() {
              return `rgb(${[
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(',')})`;
            },
          },

          series: [
            {
              type: 'wordCloud',
              // gridSize: 2,
              // sizeRange: [12, 50],
              // // rotationRange: [-90, 90],
              // rotationRange: [-50, 50],

              gridSize: 1,
              sizeRange: [20, 35],
              // rotationRange: [-45, 0, 45, 90],

              // maskImage: mask,

              data: toRaw(questionData.questions[index].choices),

              // data: [
              //
              //   {
              //     name: '汽车',
              //     value: 928,
              //   },
              //   {
              //     name: '视频',
              //     value: 906,
              //   },
              //   {
              //     name: '电视',
              //     value: 825,
              //   }
              //   ]
              //   {
              //     name: 'Lover Boy 88',
              //     value: 514,
              //   },
              //   {
              //     name: '动漫',
              //     value: 486,
              //   },
              //   {
              //     name: '音乐',
              //     value: 53,
              //   },
              //   {
              //     name: '直播',
              //     value: 163,
              //   },
              //   {
              //     name: '广播电台',
              //     value: 86,
              //   },
              //   {
              //     name: '戏曲曲艺',
              //     value: 17,
              //   },
              //   {
              //     name: '演出票务',
              //     value: 6,
              //   },
              //   {
              //     name: '给陌生的你听',
              //     value: 1,
              //   },
              //   {
              //     name: '资讯',
              //     value: 1437,
              //   },
              //   {
              //     name: '商业财经',
              //     value: 422,
              //   },
              //   {
              //     name: '娱乐八卦',
              //     value: 353,
              //   },
              //   {
              //     name: '军事',
              //     value: 331,
              //   },
              //   {
              //     name: '科技资讯',
              //     value: 313,
              //   },
              //   {
              //     name: '社会时政',
              //     value: 307,
              //   },
              //   {
              //     name: '时尚',
              //     value: 43,
              //   },
              //
              //   {
              //     name: '比价',
              //     value: 201,
              //   },
              //   {
              //     name: '海淘',
              //     value: 195,
              //   },
              //   {
              //     name: '移动APP购物',
              //     value: 179,
              //   },
              //   {
              //     name: '支付方式',
              //     value: 119,
              //   },
              //   {
              //     name: '代购',
              //     value: 43,
              //   },
              //   {
              //     name: '体育健身',
              //     value: 1234,
              //   },
              //   {
              //     name: '体育赛事项目',
              //     value: 802,
              //   },
              //   {
              //     name: '运动项目',
              //     value: 405,
              //   },
              //   {
              //     name: '体育类赛事',
              //     value: 337,
              //   },
              //   {
              //     name: '健身项目',
              //     value: 199,
              //   },
              //   {
              //     name: '健身房健身',
              //     value: 78,
              //   },
              //   {
              //     name: '运动健身',
              //     value: 77,
              //   },
              //   {
              //     name: '家庭健身',
              //     value: 36,
              //   },
              //   {
              //     name: '健身器械',
              //     value: 29,
              //   },
              //   {
              //     name: '办公室健身',
              //     value: 3,
              //   },
              //   {
              //     name: '商务服务',
              //     value: 1201,
              //   },
              //   {
              //     name: '法律咨询',
              //     value: 508,
              //   },
              //   {
              //     name: '化工材料',
              //     value: 147,
              //   },
              //   {
              //     name: '广告服务',
              //     value: 125,
              //   },
              //   {
              //     name: '会计审计',
              //     value: 115,
              //   },
              //   {
              //     name: '人员招聘',
              //     value: 101,
              //   },
              //   {
              //     name: '印刷打印',
              //     value: 66,
              //   },
              //   {
              //     name: '知识产权',
              //     value: 32,
              //   },
              //   {
              //     name: '翻译',
              //     value: 22,
              //   },
              //   {
              //     name: '安全安保',
              //     value: 9,
              //   },
              //   {
              //     name: '公关服务',
              //     value: 8,
              //   },
              //   {
              //     name: '商旅服务',
              //     value: 2,
              //   },
              //   {
              //     name: '展会服务',
              //     value: 2,
              //   },
              //   {
              //     name: '特许经营',
              //     value: 1,
              //   },
              //   {
              //     name: '休闲爱好',
              //     value: 1169,
              //   },
              //   {
              //     name: '收藏',
              //     value: 412,
              //   },
              // ],
            },
          ],
        };
        this.chart.setOption(option); // 使用刚指定的配置项和数据显示图表。
      },
      screenAdapter() {
        // 获取自适应大小
        const titleFontSize = (this.$refs.CloudArea.offsetWidth / 100) * 3.6;
        // eslint-disable-next-line no-console
        console.log('titleFontSize', titleFontSize);
        // 自适应配置
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize, // 自适应字体大小
            },
          },
          legend: {
            // 图例组件
            itemWidth: titleFontSize / 2,
            itemHeight: titleFontSize / 2,
            itemGap: titleFontSize / 2,
            textStyle: {
              fontSize: titleFontSize / 2, // 自适应字体大小
            },
          },
        };
        this.chart.setOption(adapterOption);
        // 自适应
        this.chart.resize();
      },
    },
  };
</script>

<style scoped lang="less">
  .general-card {
    min-height: 204px;
  }

  .content {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
  }

  .percent-text {
    margin-left: 16px;
  }

  .chart {
    width: 100%;
    height: 80px;
    vertical-align: bottom;
  }

  .unit {
    padding-left: 8px;
    font-size: 12px;
  }

  .label {
    padding-right: 8px;
    font-size: 12px;
  }
</style>
